<template>
    <el-card class="box-card">
    <el-container>
        <el-aside width="250px" style="margin: 5px 10px 0px 10px;">
            <el-input size="small" v-model="filterText" prefix-icon="el-icon-search" placeholder="请输入部门名称" >
            </el-input>
            <el-tree style="margin-top:20px;" :data="treeDataTab" :props="defaultProps" ref="tree" @node-click="handleNodeClick" 
                :filter-node-method="filterNode" default-expand-all>
            </el-tree>
        </el-aside>
        <el-main style="margin:0px;padding:0px;padding-left:15px;background:white;">
            <div style="height: 100%;background: white;">
                <div class="box-row-1">
                    <el-form :inline="true" :model="seachFrom" ref="dataForm1">
                        <el-form-item label="用户名称" prop="nick_name" class="itemClass">
                            <el-input size="small" v-model="seachFrom.nick_name" placeholder="请输入用户名称"></el-input>
                        </el-form-item>

                        <el-form-item label="手机号码" prop="phonenumber" class="itemClass">
                            <el-input size="small" v-model="seachFrom.phonenumber" placeholder="请输入手机号码"></el-input>
                        </el-form-item>

                        <el-form-item label="用户状态" class="displayClass">
                        <el-select  v-model="seachFrom.status" size="small" placeholder="请选择" clearable>
                            <el-option v-for="item in options" :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                        </el-form-item>

                        <el-form-item>
                            <el-button size="small" type="primary" icon="el-icon-search" @click="submitForm('dataForm1')">搜索</el-button>
                            <el-button size="small" @click="resetForm('dataForm1')" icon="el-icon-refresh">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>

                <div class="box-row-2">
                    <el-row>
                        <el-col :span="12">
                            <div class="grid-content bg-purple">
                                <el-button size="small" type="primary" icon="el-icon-plus" @click="add" plain>新增</el-button>
                                <el-button size="small" type="success" icon="el-icon-edit" :disabled="isUDisable" @click="handleEdit(null,true)" plain>修改</el-button>
                                <el-button size="small" type="danger" icon="el-icon-delete" @click="handleDelAll" :disabled="isDisable" plain>删除</el-button>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content bg-purple-light" style="text-align:right;">
                                <el-button  icon="el-icon-refresh" size="small" @click="Refresh" circle></el-button>
                            </div>
                        </el-col>
                    </el-row>
                </div>

                <div class="box-row-3">
                    <el-table :data="tableData" style="width: 100%;"  height="calc(100vh - 280px)"  ref="dataTable" v-loading="isloading" 
                        @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column  prop="user_name" label="用户账号"  :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column  prop="nick_name" label="用户昵称"  :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column  prop="dept_name" label="部门"  :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column  prop="phonenumber" label="手机号码"  :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="status" label="状态" width="80" align="center">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.status == 0 ? 'primary' : 'danger'" disable-transitions>
                                    <div v-if="scope.row.status == 0">正常</div>
                                    <div v-else>禁用</div>
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="create_time" label="创建时间"  align="center" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column fixed="right" label="操作" align="center" width="160">
                        <template slot-scope="scope">
                            <el-button @click="handleEdit(scope.row)" type="text" size="small" icon="el-icon-edit">编辑</el-button>
                            <el-button @click="handleDel(scope.row)" type="text" size="small" >删除</el-button>
                        </template>
                        </el-table-column>
                    </el-table>
                    <div class="box-row-3-pagination">
                        <Pagination  :pageindex="PageIndex" :pagesize="PageSize" :total="total"  @CurrentChange="CurrentChange" @SizeChange="SizeChange" />
                    </div>
                </div>
            </div>
        
            <el-dialog width="900px" :title="title" :visible.sync="dialogFormVisible" @close="closeDialog" :close-on-click-modal="false">
                <AddUsers :isUpdate="isUpdate" :model="model" @closeDialog="closeDialog" @dataBind="dataBind"/>
            </el-dialog>

        </el-main>
    </el-container>
  </el-card>
</template>

<script>
import Pagination from '../../components/Pagination.vue'
import AddUsers from './components/AddUsers.vue'
export default {
    components:{
        Pagination,
        AddUsers
    },
data(){
    return{
        tableData:[],//表格数据
        treeDataTab:[], //tree数据
        isUpdate:false,//是否修改
        isDisable:true,//是否禁用按钮
        isUDisable:true,//是否禁用修改按钮
        dialogFormVisible:false,//是否显示弹框
        isloading:false,//是否打开加载框
        title:'新增用户',//弹框标题
        filterText:'',//搜索名称
        PageIndex:1,//当前页数
        PageSize:10,//每页显示条数
        total:0,//总条数
        defaultProps:{//tree 绑定lable、children
            label:'dept_name',
            children:'children'
        },
        seachFrom:{
            nick_name:'',
            phonenumber:'',
            status:''
        },
        options:[{
                value: '0',
                label: '正常'
            },{
                value:'1',
                label:'停用'
            }
        ],
        model:{
            nick_name:'',
            dept_name:'',
            dept_id:'',
            phonenumber:'',
            email:'',
            phone:'',
            user_name:'',
            password:'123456',
            sex:'',
            status:'0',
            post_name:'',
            post_id:'',
            roles:'',
            remark:'',
        },
    }
},
methods:{
SizeChange(e){
    this.PageSize = e;
    console.log('1');
    //从第一页开始
    this.PageIndex = 1;
    this.dataBind();
},
CurrentChange(e){
    console.log('1');
    this.PageIndex = e;
    this.dataBind();
},
closeDialog(){
    this.model={
            nick_name:'',
            dept_name:'',
            dept_id:'',
            phonenumber:'',
            email:'',
            phone:'',
            user_name:'',
            password:'',
            sex:'',
            status:'',
            post_name:'',
            post_id:'',
            roles:'',
            remark:'',
        },
    this.dialogFormVisible=false;
},
add(){
    this.dialogFormVisible=true;
},
handleEdit(model,isHeadU=false){

},
handleDel(model){

},
handleDelAll(){

},
Refresh(){
},
treeDataBind(){
        this.isloading=true
        this.$http.request({
            type:'get',
            url:'/api/DepartmentManage',
        }).then(res=>{
            console.log(res.data);
            if(res.data.code==200){
                this.treeDataTab=res.data.data;
                // let datas = res.data.data;
                // this.optionTree= this.cvtTreeData(datas);
            }
        }).catch(err=>{
            this.ShowMsg('服务器异常','error');
            console.log(err)
        }).finally(()=>{
            this.isloading=false;
        })
        },
        dataBind(){
            this.isloading = true;
            this.$http.request({
                type:'get',
                url:'/api/UserManage',
                params:{
                    PageIndex:this.PageIndex,
                    PageSize:this.PageSize,
                    nick_name:this.seachFrom.nick_name,
                    phonenumber:this.seachFrom.phonenumberm,
                    status:this.seachFrom.status
                }
            }).then(res=>{
                if(res.data.code==200){
                    this.tableData = res.data.data;
                    this.total = res.data.count;
                }
            }).catch(err=>{
                this.ShowMsg('服务器繁忙，请稍后重试','error');
            }).finally(()=>{
                this.isloading=false;
            })
        },
//监听dataTable是否有选中项
handleSelectionChange(val){
    if(val.length > 0){
        this.isDisable = false;
    }
    else if(!val.length){
        this.isDisable =true;
    }
    let isTrue = val.length ===1 ? false:true;
    this.isUDisable= isTrue;
},
     //tree模糊搜索事件
filterNode(value,data){
    if (!value) return true;
    return data.dept_name.indexOf(value) !== -1;
},
        //tree点击事件
    handleNodeClick(data){

    },
    submitForm(formName){
             this.$refs[formName].validate((valid)=>{
                if(valid){
                }else{
                }
            })
        },
    resetForm(formName){
        this.$refs[formName].resetFields();
    },
},
watch:{
    filterText(val) {
        this.$refs.tree.filter(val);
    }
},
created(){
    this.treeDataBind();
    this.dataBind();
}


}
</script>

<style>
.box-card{
    height: 99%;
}
.itemClass{
    margin-right:15px;
}

.box-Input-mini textarea{
    width:100%;
    height:35px;
}
.d{
    display: none;
}
.box-form{
    display: flex;
    align-items: center;
}
.displayClass{
    display: flex;
    margin-right:15px;
}
.displayClass input{
    width:235px;
    height:35px;
}
.el-button--mini{
    padding:10px 20px;
}
.bg-purple-light{
    margin-right: 10px;
    display: flex;
    justify-content: flex-end;
}
.box-row-3{
    margin-top:10px;
}
.box-Input-mini input,.box-Input-mini textarea{
    width:100%;
}
.box-Input-mini textarea{
    height:60px;
}
.el-button--mini{
    padding:10px 20px;
}
.bg-purple-light{
    margin-right: 10px;
    display: flex;
    justify-content: flex-end;
}
.box-row-3,.box-row-3-pagination{
    margin-top:10px;
}
</style>